<template>
  <div :style="getStyle(borderRadius)">
    <iframe :src="url" style="border-width: 0;" :style="{
      width: w ? w + 'px': '100%',
      height: h? h + 'px': '100%',
    }"></iframe>
  </div>
</template>

<script setup lang="ts">

const props = defineProps({
  w: {
    type: Number,
    default: () => {
      return 0
    }
  },
  h: {
    type: Number,
    default: () => {
      return 0
    }
  },
  url: {
    type: String,
    default: () => {
      return ''
    }
  },
  borderRadius: {
    type: Number,
    default: () => {
      return 0
    }
  }
})

const getStyle = (radius: number) => {
  return {
    borderRadius: `${radius}px`,
    overflow: 'hidden',
    height: '100%',
  }
}
</script>
